<template>
    <div class="wrap">
        <div class="search">
            <div class="left">
                <!-- <div class="bg" @click="sayToFather">
                    <img src="@/assets/shareData/search.png" />
                </div> -->
                <van-field @clear="sayToFather" clearable v-model="posSnOrTusn" :border="false" placeholder="请输入SN或交易单号" />
                <div class="bg serachBtn" @click="sayToFather">搜索</div>
            </div>
            <div class="right" @click="getFindByTargetAndClassesId">
                <span>筛选</span>
                <img src="@/assets/select.png" alt="" />
            </div>
        </div>
        <van-popup v-model:show="show" position="right" :style="{ width: '70%', height: '100%' }">
            <div class="popup-content">
                <div class="title">筛选</div>
                <div style="margin-top: 20px">机具类型</div>
                <div class="btnBox">
                    <div
                        class="btnItem"
                        @click="choseType(item)"
                        :class="posType == item.type ? 'acticitybtn' : ''"
                        v-for="(item, index) in optionList"
                        :key="index"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <div style="margin-top: 20px">交易结果</div>
                <div class="btnBox">
                    <div
                        class="btnItem"
                        @click="choseResult(item)"
                        :class="jyResult == item.status ? 'acticitybtn' : ''"
                        v-for="(item, index) in activeList"
                        :key="index"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <div style="margin-top: 20px">交易类型</div>
                <div class="btnBox">
                    <div
                        class="btnItem"
                        @click="choseJyTtpe(item)"
                        :class="jyType == item.status ? 'acticitybtn' : ''"
                        v-for="(item, index) in typeList"
                        :key="index"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </div>
            <div class="btnBottom">
                <div class="reset" @click="onRest">重置</div>
                <div class="onSub" @click="sayToFather">确定</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { findByTargetAndClassesId } from '@/api/dataAnalysis'
export default defineComponent({
    name: 'terminalSearch',
    props: {
        text: {
            type: String
        },
        ontransType: {
            type: String,
            default: ''
        }
    },

    setup(props, context) {
        const route = useRoute()
        const state = reactive({
            posSnOrTusn: '',
            posType: '',
            jyResult: '',
            jyType: '',
            show: false,
            actList: [],
            seData: {},
            optionList: [
                { name: '全部', type: '' },
                { name: '电签', type: 'DQPOS' },
                { name: '传统', type: 'CTPOS' }
            ],
            activeList: [
                { name: '全部', status: '' },
                { name: '成功', status: 'SUCCESS' },
                { name: '失败', status: 'FAILED' }
            ],
            typeList: [
                { name: '全部', status: '' },
                { name: '贷记卡', status: 'POS_CREDIT' },
                { name: '借记卡', status: 'POS_DEBIT' },
                { name: '云闪付', status: 'POS_FLASH' },
                { name: '微信扫码', status: 'WXPAY' },
                { name: '银联扫码', status: 'UNIONPAY' },
                // { name: 'VIP收款', status: 'VIP' },
                { name: '支付宝扫码', status: 'ALIPAY' }
            ]
        })
        watch(
            () => route.query.transType,
            newValue => {
                state.jyType = newValue
            },
            { immediate: true, deep: true }
        )
        const Router = useRouter()
        const getFindByTargetAndClassesId = () => {
            state.show = true
        }
        const search = () => {
            if (state.seData.actCode === '全部活动') {
                state.seData.actCode = ''
            }
            state.show = false
            context.emit('listen', state.seData)
        }
        // context作用是获取上下文对象，
        // 如果setup写法为setup(props, { emit })的方式的话，下面的context可以省略
        const sayToFather = () => {
            console.log(state.posSnOrTusn, 'state.posSnOrTusn')
            context.emit('listen', {
                posSnOrFlowId: state.posSnOrTusn,
                useType: state.posType,
                transStatus: state.jyResult,
                transType: state.jyType
            })
            state.show = false
        }
        const clearSearch = val => {
            console.log(val)
        }
        const choseType = val => {
            state.posType = val.type
        }
        const choseResult = val => {
            state.jyResult = val.status
        }
        const choseJyTtpe = val => {
            state.jyType = val.status
        }
        const onRest = () => {
            state.posType = ''
            state.jyResult = ''
            state.jyType = ''
        }
        return {
            ...toRefs(state),
            sayToFather,
            onRest,
            search,
            getFindByTargetAndClassesId,
            choseType,
            choseResult,
            choseJyTtpe
        }
    }
})
</script>

<style lang="scss" scoped>
.num {
    color: #fffffe;
    //margin-left: 22rpx;
    padding: 10px 10px 0 10rpx;
    font-size: 14px;
    display: flex;
    align-items: center;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
.numAllSrc {
    margin-right: 15px;
    height: 16px;
    width: 16px;
}
.serc {
    justify-content: space-between;
    background: linear-gradient(180deg, #db4242 0%, #ff95ae 100%);
    position: -webkit-sticky;
    position: sticky;
    top: var(--window-top);
    z-index: 99;
}
.top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .search {
        flex: 1;
        height: 100%;
        border-radius: 17px;
        background: #ffffff;
        overflow: hidden;
        display: flex;
        align-items: center;
        .searchImg {
            width: 66px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #66d6ff;
        }
    }

    .screen {
        width: 20%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        display: inline-block;
        span {
            font-size: 15px;
            //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
        }
        image {
            width: 15px;
            height: 15px;
            margin-left: 10px;
            vertical-align: middle;
        }
    }
}
.popup-content {
    padding: 44px 10px;
    .title {
        font-size: 18px;
        font-weight: blod;
        text-align: center;
        color: #000000;
        margin-bottom: 20px;
    }
    .btnBox {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 5px;

        .btnItem {
            width: 32%;
            line-height: 30px;
            background: #f1f1f1;
            opacity: 1;
            border-radius: 4px;
            text-align: center;
            color: #707070;
            margin-top: 10px;
            // margin-right: 6px;
        }
    }
    .acticitybtn {
        background: #66d6ff !important;
        color: #fff !important;
    }
}
.btnBottom {
    width: 100%;
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: space-around;
    .reset {
        width: 100px;
        line-height: 36px;
        background: #f1f1f1;
        opacity: 1;
        border-radius: 4px;
        color: #656565;
        text-align: center;
    }
    .onSub {
        width: 100px;
        line-height: 36px;
        background: #66d6ff;
        opacity: 1;
        border-radius: 4px;
        color: #ffffff;
        text-align: center;
    }
}
.wrap {
    padding: 10px;
}
.search {
    height: 35px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
        flex: 1;
        background: #ffffff;
        opacity: 1;
        border-radius: 17px;
        overflow: hidden;
        display: flex;
        align-items: center;
        height: 100%;
        margin-right: 10px;
        .bg {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 66px;
            height: 100%;
            img {
                width: 20px;
            }
        }
        .serachBtn {
            width: 98px;
            background: #66d6ff;
            opacity: 1;
            border-radius: 40px;
            color: #fff;
        }
    }
    .right {
        height: 100%;
        width: 95px;
        background: #ffffff;
        opacity: 1;
        border-radius: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        span {
            font-size: 14px;
            margin-right: 10px;
        }
        img {
            width: 18px;
        }
    }
}
.btn {
    div {
        padding: 5px 10px;
        border-radius: 10px;
    }
}
</style>
